// import React, { useState } from "react";
import { BasicForm, useForm } from "@/components/Form";
import { useTranslation } from "react-i18next";
import "./index.less";
import { BasicTable, useTable, FormSchema, BasicColumn } from "@/components/Table/index";
import { useEffect } from "react";
import moment from "moment";
export default function technical_transfer() {
	const { t } = useTranslation();
	const columns: BasicColumn[] = [
		{
			title: t("felix_ui.sq_numb"),
			dataIndex: "index",
			// width: 50,
			render: (text, record, index) => index * 1 + 1 // 设置序号
		},
		{
			title: t("felix_ui.secmt_date"),
			dataIndex: "secmt_date",
			width: 160
		},
		{
			title: t("felix_ui.full_name"),
			dataIndex: "full_name",
			width: 160
		},
		{
			title: t("felix_ui.birthday"),
			dataIndex: "birthday"
		},
		{
			title: t("felix_ui.gender"),
			dataIndex: "gender"
		},
		{
			title: t("felix_ui.unit"),
			dataIndex: "unit"
		},
		{
			title: t("felix_ui.poz_level"),
			dataIndex: "poz_level"
		},
		{
			title: t("felix_ui.secmt_content"),
			dataIndex: "secmt_content"
		},
		{
			title: t("felix_ui.workplace_host"),
			dataIndex: "workplace_host"
		},
		{
			title: t("felix_ui.workplace_cord"),
			dataIndex: "workplace_cord"
		}
	];
	const [registerTable, { reload }] = useTable({
		api: getList,
		columns,
		isTreeTable: true,
		pagination: false,
		striped: false,
		useSearchForm: false,
		showTableSetting: true,
		bordered: true,
		showIndexColumn: false,
		canResize: false
	});
	async function getList() {
		return [
			{
				full_name: "So luot sinh",
				birthday: "20",
				gender: "21",
				unit: "22",
				poz_level: "23",
				secmt_content: "24",
				workplace_host: "25",
				workplace_cord: "26"
			},
			{
				full_name: "So luot sinh",
				birthday: "33",
				gender: "21",
				unit: "22",
				poz_level: "23",
				secmt_content: "24",
				workplace_host: "25",
				workplace_cord: "26"
			},
			{
				full_name: "So luot sinh",
				birthday: "44",
				gender: "21",
				unit: "22",
				poz_level: "23",
				secmt_content: "24",
				workplace_host: "25",
				workplace_cord: "26"
			},
			{
				full_name: "So luot sinh",
				birthday: "12",
				gender: "21",
				unit: "22",
				poz_level: "23",
				secmt_content: "24",
				workplace_host: "25",
				workplace_cord: "26"
			},
			{
				full_name: "So luot sinh",
				birthday: "2",
				gender: "21",
				unit: "22",
				poz_level: "23",
				secmt_content: "24",
				workplace_host: "25",
				workplace_cord: "26"
			},
			{
				full_name: "So luot sinh",
				birthday: "342",
				gender: "21",
				unit: "22",
				poz_level: "23",
				secmt_content: "24",
				workplace_host: "25",
				workplace_cord: "26"
			},
			{
				full_name: "So luot sinh",
				birthday: "342",
				gender: "21",
				unit: "22",
				poz_level: "23",
				secmt_content: "24",
				workplace_host: "25",
				workplace_cord: "26"
			},
			{
				full_name: "So luot sinh",
				birthday: "342",
				gender: "21",
				unit: "22",
				poz_level: "23",
				secmt_content: "24",
				workplace_host: "25",
				workplace_cord: "26"
			},
			{
				full_name: "So luot sinh",
				birthday: "342",
				gender: "21",
				unit: "22",
				poz_level: "23",
				secmt_content: "24",
				workplace_host: "25",
				workplace_cord: "26"
			},
			{
				full_name: "So luot sinh",
				birthday: "342",
				gender: "21",
				unit: "22",
				poz_level: "23",
				secmt_content: "24",
				workplace_host: "25",
				workplace_cord: "26"
			},
			{
				full_name: "So luot sinh",
				birthday: "342",
				gender: "21",
				unit: "22",
				poz_level: "23",
				secmt_content: "24",
				workplace_host: "25",
				workplace_cord: "26"
			},
			{
				full_name: "So luot sinh",
				birthday: "342",
				gender: "21",
				unit: "22",
				poz_level: "23",
				secmt_content: "24",
				workplace_host: "25",
				workplace_cord: "26"
			}
		];
	}

	const formSchemaTop: FormSchema[] = [
		{
			label: t("felix_ui.no_numb"),
			field: "no_numb",
			component: "Select",
			componentProps: {
				options: [
					{ label: "1", value: "1" },
					{ label: "2", value: "2" }
				]
			},
			colProps: { span: 4 }
		},
		{
			label: t("felix_ui.secmt_notes"),
			field: "secmt_notes",
			component: "Input",
			colProps: { span: 4 }
		},
		{
			label: t("felix_ui.secmt_date"),
			field: "secmt_date",
			component: "RangePicker",
			colProps: { span: 8 },
			componentProps: {
				showTime: {
					defaultValue: [moment("00:00:00", "DD-MM-YYYY"), moment("23:59:59", "DD-MM-YYYY")]
				}
			}
		}
	];
	const [formTop] = useForm({
		schemas: formSchemaTop,
		// showActionButtonGroup: false,
		labelWidth: 80
	});
	const formSchemaBottom: FormSchema[] = [
		{
			label: t("felix_ui.sq_numb"),
			field: "sq_numb",
			component: "InputNumber",
			colProps: { span: 4 }
		},
		{
			label: t("felix_ui.support_date"),
			field: "support_date",
			component: "RangePicker",
			colProps: { span: 8 },
			componentProps: {
				showTime: {
					defaultValue: [moment("00:00:00", "DD-MM-YYYY"), moment("23:59:59", "DD-MM-YYYY")]
				}
			}
		},
		{
			label: t("felix_ui.full_name"),
			field: "full_name",
			component: "Input",
			colProps: { span: 4 }
		},
		{
			label: t("felix_ui.birthday"),
			field: "birthday",
			component: "Input",
			colProps: { span: 4 }
		},
		{
			label: t("felix_ui.gender"),
			field: "gender",
			component: "Input",
			colProps: { span: 4 }
		},
		{
			label: t("felix_ui.unit"),
			field: "unit",
			component: "Input",
			colProps: { span: 4 }
		},
		{
			label: t("felix_ui.poz_level"),
			field: "poz_level",
			component: "Select",
			componentProps: {
				options: [
					{ label: "1", value: "1" },
					{ label: "2", value: "2" }
				]
			},
			colProps: { span: 4 }
		},
		{
			label: t("felix_ui.technique"),
			field: "technique",
			component: "Select",
			componentProps: {
				options: [
					{ label: "1", value: "1" },
					{ label: "2", value: "2" }
				]
			},
			colProps: { span: 4 }
		},
		{
			label: t("felix_ui.place_of_impl"),
			field: "place_of_impl",
			component: "Input",
			colProps: { span: 6 },
			labelWidth: 170
		},
		{
			label: t("felix_ui.performer_id"),
			field: "performer_id",
			component: "Input",
			colProps: { span: 6 },
			labelWidth: 170
		}
	];
	const [formBottom] = useForm({
		schemas: formSchemaBottom,
		showActionButtonGroup: false,
		labelWidth: 80
	});
	useEffect(() => {
		reload();
	}, []);

	return (
		<div className="technical_transfer">
			<div className="technical_transfer_content">
				<BasicForm register={formTop}></BasicForm>
				<div className="technical_transfer_contentBox">
					<div>
						<BasicTable register={registerTable}></BasicTable>
					</div>
					<BasicForm register={formBottom}></BasicForm>
				</div>
			</div>
		</div>
	);
}
